var doc = document;

// 通用函数, 获取dom
function gId(n){
    return doc.getElementById(n)
}

// 飞机移动
gId('wrapId').onmousemove = function(e){
    // onmousemove事件, 会在鼠标移动时发生事件
    var el = e.pageX - gId('wrapId').offsetLeft - 20;
    var et = e.pageY - gId('wrapId').offsetTop - 20;

    gId('planeId').style.left = el + 'px';
    gId('planeId').style.top = et + 'px';
}

// 生成子弹
function createBulletFn(e){
    // createElement 创建html标签
    var _bullet = doc.createElement('div')
    _bullet.style.left = e.pageX - gId('wrapId').offsetLeft + 'px';
    _bullet.style.top = e.pageY - gId('wrapId').offsetTop + 'px';
    // setAttribute 为html标签添加属性并且赋值, 存在则修改值
    _bullet.setAttribute('class','bulletDiv')
    // 把创建的子节点(标签)插入到html标签中
    gId('wrapId').appendChild(_bullet);

    // 选出x轴上所有的目标, 就是跟子弹在同一横线水平线上
    // 这些都是可能被子弹击中的目标
    var _fireTarget_x = [];
    var _lis = gId('wrapId').querySelectorAll('li');

    for(var i=0; i<_lis.length; i++){
        if( _bullet.offsetLeft > _lis[i].offsetLeft
            && _bullet.offsetLeft < _lis[i].offsetLeft + 60){
                _fireTarget_x.push(_lis[i])
            }
    }
    // console.log(_fireTarget_x)

    // 子弹向上运行, 一定距离之后, 消失
    // 得到生成子弹时的Y坐标
    var n = _bullet.offsetTop;
    // setInterval 定时器, 按间隔时间,反复运行
    var _s = setInterval(function(){
        _bullet.style.top = n-- + 'px';
        // 子弹为击中, 清除
        if(n <= 0){
            // clearInterval(), 清除定时器
            clearInterval( _s );
            // removeChild(), 删除dom节点
            gId('wrapId').removeChild(_bullet);
        }

        // 判断是否击中目标
        if(_fireTarget_x.length >= 0){
            for(var i=0; i<_fireTarget_x.length; i++){
                if( n == _fireTarget_x[i].offsetTop
                    && _fireTarget_x[i].getAttribute('class') != 'targetDiv yes_boom' ){
                        _fireTarget_x[i].setAttribute('class', 'targetDiv yes_boom')

                        // 击中之后, 清除子弹计数器
                        clearInterval(_s);
                        var _c = setInterval(function(){
                            gId('wrapId').removeChild(_bullet);
                            clearInterval(_c)
                        });
                    }
            }
        }
    },1)
}

// 生成目标, 列表数据,xy坐标
function targetListObj(){
    var _ufo = [];
    for(var i=0; i<10; i++){
        var _obj = {}
        _obj.x = Math.floor(Math.random() * 10)
        _obj.y = Math.floor(Math.random() * 10)
        _ufo.push( _obj );
    }
    // console.log(_ufo)
    createTargetFn(_ufo)
}
targetListObj()

// 生成目标
function createTargetFn(_ufo){
    for(var i=0; i<_ufo.length; i++){
        var _targetBlock = doc.createElement('li')
        _targetBlock.setAttribute('class','targetDiv no_boom');
        _targetBlock.style.left = _ufo[i].x * 80 + 'px';
        gId('wrapId').appendChild( _targetBlock )
    }
    // 获得所有li标签
    var _lis = gId('wrapId').querySelectorAll('li')
    // console.log(_lis)

    // 目标向下移动
    var n = 0; //计数器
    var _s = setInterval(function(){
        for(var j=0; j<_lis.length; j++){
            _lis[j].style.top = ( _ufo[j].y++ ) * 5 + 'px';
            n++;
            
            if(n>500){
                clearInterval(_s);
                gId('wrapId').removeChild(_lis[j]);
            }
        }
    },100);
}

// 射击! 也就是创建子弹dom节点
gId('wrapId').onclick = function(e){
    createBulletFn(e)
}